<template>
  <div data-component="Format.base" v-if="vIf">
    <!-- 前缀 -->
    {{ scope.row[column['prop']] ? prefix : '' }}
    <!--
      * 时间转换
      * 用法：columns传参 { format: 'time', formatParams: [undefined, 'YYYY-MM-DD'] } [输入格式，输出格式]
    -->
    <template v-if="column.format === 'time'">
      {{ scope.row[column['prop']] | moment(...(column.formatParams || [])) }}
    </template>
    <!--
      * 数字转换
      * 用法：columns传参 { format: 'number' }
    -->
    <template v-else-if="column.format === 'number'">
      {{ scope.row[column['prop']] | NumberFormat }}
    </template>
    <!--
      * 数字转换 - 超过10e8，显示无限制
      * 用法：columns传参 { format: 'infinity' }
    -->
    <template v-else-if="column.format === 'infinity'">
      {{ scope.row[column['prop']] | isWuxian }}
    </template>
    <!--
      * 字典转换
      * 用法：columns传参 { format: 'dictionary', formatParams: '字典属性名' }
    -->
    <template v-else-if="column.format === 'dictionary'">
      {{ scope.row[column['prop']] | TransByList(dictionary[dictionaryProp], dictionarySplit, dictionarySplit2) }}
    </template>
    <!--
      * 单行展示
      * 用法：columns传参 { format: 'nowrap' }
    -->
    <template v-else-if="column.format === 'nowrap'">
      <el-popover
        :disabled="!showNowrapPopover"
        popper-class="vs-popover-mini  vs-popover-info"
        placement="bottom"
        trigger="hover">
        {{ scope.row[column['prop']] }}
        <div :id="`format-base-nowrap-${id}`" class="text-ellipsis" slot="reference">{{ scope.row[column['prop']] }}</div>
      </el-popover>
    </template>
    <!-- 用于多行默认值 -->
    <template v-else-if="isMulti || prefix || suffix">
      {{ scope.row[column['prop']] || '-' }}
    </template>
    <!-- 后缀 -->
    {{ scope.row[column['prop']] ? suffix : '' }}
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
let id = 0;
export default {
  props: {
    scope: {
      type: Object,
      default: () => {}
    },
    column: {
      type: Object,
      default: () => {}
    },
    isMulti: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      id,
      baseType: ['time', 'number', 'infinity', 'dictionary'],
      showNowrapPopover: false
    };
  },
  computed: {
    ...mapGetters({
      dictionary: 'dictionary/get'
    }),
    // 前缀
    prefix () {
      return this.column.formatPrefix || '';
    },
    // 后缀
    suffix () {
      return this.column.formatSuffix || '';
    },
    // 模板中的v-if
    vIf () {
      if (this.column.if === undefined) {
        return true;
      } else {
        return this.scope.row[this.column.if];
      }
    },
    // 字典属性名
    dictionaryProp () {
      return this.column.formatParams.prop || this.column.formatParams;
    },
    // 字典分割符
    dictionarySplit () {
      return (this.column.formatParams.constructor === Object) ? this.column.formatParams.split : undefined;
    },
    // 字典分割符2
    dictionarySplit2 () {
      return (this.column.formatParams.constructor === Object) ? this.column.formatParams.split2 : undefined;
    }
  },
  methods: {
    handleCellMouseEnter (target) {
      function getStyle (element, property = null) {
        const css = window.getComputedStyle(element, null);
        return property ? css[property] : css;
      }

      const range = document.createRange();
      range.setStart(target, 0);
      range.setEnd(target, target.childNodes.length);

      const rangeWidth = range.getBoundingClientRect().width;
      const padding =
        (parseInt(getStyle(target, 'paddingLeft'), 10) || 0) +
        (parseInt(getStyle(target, 'paddingRight'), 10) || 0);

      const data = {
        rangeWidth,
        padding,
        'rangeWidth+padding': rangeWidth + padding,
        offsetWidth: target.offsetWidth,
        scrollWidth: target.scrollWidth
      };

      // document.querySelector('.format-base-nowrap-label').innerText = JSON.stringify(data);

      if (
        rangeWidth + padding > target.offsetWidth ||
        target.scrollWidth > target.offsetWidth
      ) {
        return true;
      } else {
        return false;
      }
    }
  },
  mounted () {
    // const nowrapText = this.$refs.nowrapText;
    id++;
    this.id = id;
    this.$nextTick(() => {
      const nowrapText = document.querySelector(`#format-base-nowrap-${this.id}`);
      if (nowrapText) {
        const isOverflow = this.handleCellMouseEnter(nowrapText);
        this.showNowrapPopover = isOverflow;
      }
    });
  }
};
</script>
